<template>
  <el-table-column
    v-for="(item, index) in tableHeaders"
    :key="item.value"
    :sortable="item.isSort ? 'custom' : false"
    :property="item.value"
    show-overflow-tooltip
    :width="item.width ?? 'auto'"
    :min-width="item.minWidth"
    :fixed="item.fixed"
  >
    <template #header>
      <div class="customer-header">
        <!--     设置责任人显示 start   -->
        <PersonSet v-if="tableHeaders[index].value === 'principal'" @set-person="handelSetPerson" />
        <!--     设置责任人显示 end   -->
        <div class="customer-header__label" @click.stop>{{ tableHeaders[index].label }}</div>
        <FilterTableItem
          v-if="tableHeaders[index].isSelect"
          :table-header-item="tableHeaders[index]"
          :column-index="index"
          @handel-filter-data="handelFilterData"
        />
      </div>
    </template>

    <!--
 todo:可以优化成动态组件，根据字段命名组件
 -->
    <template v-if="isCustomerCol(item).value" #default="{ row }">
      <!--   客户信息  跳转客户详情   -->
      <div v-if="item.value === 'customerName'" class="custom-cell">
        <set-key-customer :rowData="row" @setKeyCustomerSave="setKeyCustomerSave">
          <template #content>
            <div class="custom-cell customer-name" @click="handelDetail(row, 'clientInfo')">
              <span class="customer-name__name">{{ row.customerName }}</span>
            </div>
          </template>
        </set-key-customer>
      </div>
      <!--    开工日期  -->
      <div v-if="item.value === 'factStartDate'" class="custom-cell">
        <span v-if="row.buildStatus === 'not_start'">{{ row.startPlainDate }}（计划）</span>
        <span v-else>{{ row.factStartDate }}</span>
      </div>
      <!--    面积  -->
      <div v-if="item.value === 'area'" class="custom-cell">
        <span v-if="row.area">{{ row.area }}㎡</span>
      </div>
      <!--    剩余天数  -->
      <div v-if="item.value === 'remainDay'" class="custom-cell">
        <span v-if="row.remainDay">{{ row.remainDay }}天</span>
      </div>
      <!--    状态  -->
      <StateView v-if="item.value === 'buildStatusDisplay'" :row-data="row" />
      <!--    负责人  -->
      <PrincipalName v-if="item.value === 'principal'" :row-data="row" />
      <!--    正在整改 跳转售后清单 -->
      <div v-if="item.value === 'reformIngNumber'" @click="handelDetail(row, 'rectification')" style="cursor: pointer">
        {{ row.reformIngNumber ?? 0 }}个
      </div>
      <!--    阶段进度 跳转施工计划  -->
      <div v-if="item.value === 'stageProcess'" class="link-style custom-cell" @click="handelDetail(row, 'constructionPlan')">
        {{ row.stageProcess }}
      </div>
      <!--     任务进度  跳转施工计划 -->
      <div v-if="item.value === 'taskProcess'" class="link-style custom-cell" @click="handelDetail(row, 'constructionPlan')">
        {{ row.taskProcess }}
      </div>
      <!--      跟进记录-->
      <div v-if="item.value === 'followLogAbs'" class="link-style custom-cell">
        <span v-if="row.followLogAbs" @click="handelFollowup(row)">{{ row.followLogAbs }}</span>
        <!--        <el-button type="primary" link v-else @click="handelFollowup(row)">&#45;&#45;</el-button>-->
        <span v-else @click="handelFollowup(row)">添加跟进</span>
      </div>
      <!--      验收计划 跳转验收计划 -->
      <div v-if="item.value === 'isCraft'" class="custom-cell">
        <template v-if="row.isCraft">
          <span class="link-style" style="margin-right: 10px" @click="handelDetail(row, 'acceptancePlan')"
            >{{ row.passNum ?? 0 }}/{{ row.totalNum ?? 0 }}</span
          >
          <span style="color: #bebebe">已设置</span>
        </template>
        <span v-else class="link-style" @click="handelDetail(row, 'acceptancePlan')">设置工艺</span>
      </div>
      <!--  已收/合同总额 跳转收款计划    -->
      <div
        v-if="item.value === 'contractTotalAmountDisplay'"
        style="cursor: pointer"
        class="custom-cell"
        @click="handelDetail(row, 'paymentPlan')"
      >
        {{ row.contractTotalAmountDisplay }}
      </div>
      <!--    施工日志  跳转施工日志-->
      <div v-if="item.value === 'buildLogNum'" class="link-style custom-cell" @click="handelDetail(row, 'constructionLog')">
        {{ buildLog(row).value }}
      </div>
    </template>
  </el-table-column>
</template>

<script setup>
import FilterTableItem from "../FilterTableItem";
import PersonSet from "../PersonSet";
import StateView from "./components/StateView";
import PrincipalName from "./components/PrincipalName";
import SetKeyCustomer from "../SetKeyCustomer";
import useComputedParams from "@/hooks/useComputedParams";

defineProps({
  tableHeaders: {
    type: Array,
    default: () => []
  }
});
const emit = defineEmits(["handelFilterData", "setPerson", "handelFollowup", "setKeyCustomerSave"]);

const customerColList = [
  "factStartDate",
  "customerName",
  "area",
  "remainDay",
  "buildStatusDisplay",
  "principal",
  "reformIngNumber",
  "stageProcess",
  "taskProcess",
  "followLogAbs",
  "isCraft",
  "contractTotalAmountDisplay",
  "buildLogNum"
];
const isCustomerCol = useComputedParams(data => {
  return customerColList.includes(data.value);
});
const buildLog = useComputedParams(data => {
  const currentFactWorkDay = data.currentFactWorkDay;
  const buildLogNum = data.buildLogNum;
  if (currentFactWorkDay && buildLogNum) {
    return `${currentFactWorkDay}天/${buildLogNum}次`;
  } else if (currentFactWorkDay) {
    return `${currentFactWorkDay}天`;
  } else if (buildLogNum) {
    return `${buildLogNum}次`;
  } else {
    return "0次";
  }
});

const handelFilterData = data => {
  emit("handelFilterData", data);
};
const handelSetPerson = data => {
  emit("setPerson", data);
};

const handelFollowup = row => {
  emit("handelFollowup", row);
};

/**
 * 跳转详情
 * @param data
 * @param funcTab
 */
const baseRouter = window.microApp.router.getBaseAppRouter();
const handelDetail = (data, funcTab) => {
  baseRouter.push({
    path: "/crm/client-info",
    query: {
      funcTab,
      customerId: data.customerId,
      afterSalesType: data.afterSalesType,
      backPageUrl: "/projectmanage/engineering-manage"
    }
  });
};

/**
 * 设置重点客户
 */
const setKeyCustomerSave = () => {
  // emit("setKeyCustomerSave");
};
</script>

<style scoped lang="scss">
@import "customTableColumn";

.customer-name {
  cursor: pointer;
  margin-left: 28px;
}
</style>
